<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <script src="../js/swiper-bundle.min.js"></script>
    <script>
        $(function () {
            var mySwiper = new Swiper('.modular_main_swiper', {
                loop: true,
                thumbs: {
                    swiper: {
                        el: '.modular_thumb_swiper',
                        slidesPerView: 'auto',
                        autoScrollOffset: 1,
                        spaceBetween: 10,
                    },
                    slideThumbActiveClass: 'modular_thumb_slide_active',
                }
            });
        })
    </script>
    <style>
        .modular_main_swiper .modular_main_slide img {
            width: 100%;
        }

        .modular_thumb_slide img {
            width: 100%;
            height: 100%;
        }

        .modular_thumb_slide {
            height: 90px;
            width: 120px;
            padding: 2px;
        }

        .modular_thumb_slide {
            opacity: 0.5;
        }

        .modular_thumb_slide_active {
            border: 1px solid var(--c_theme);
            box-sizing: border-box;
            opacity: 1;
        }

        .modular_thumb_swiper {
            margin-top: 20px;
        }

        .modular_thumb_wrapper {
            display: flex;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="carousel modular public_width title_center">
        <div class="public_title">
            <h2>院系教学楼赏析</h2>
            <p>COLLEGE TEACHING BUILDING</p>
        </div>
        <div class="swiper-container modular_main_swiper">
            <div class="swiper-wrapper modular_main_wrapper">
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUoh8KC7gcwoAs4lAU.png.webp"
                            alt=""></a>
                </div>
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUowpOjhgYwoAs4lAU.png.webp"
                            alt=""></a>
                </div>
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUo-NPbhQYwoAs4lAU.png.webp"
                            alt="">
                    </a>
                </div>
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUogNDrnAMwoAs4lAU.png.webp"
                            alt=""></a>
                </div>
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUoh8KC7gcwoAs4lAU.png.webp"
                            alt=""></a>
                </div>
                <div class="swiper-slide modular_main_slide">
                    <a href=""><img
                            src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUowpOjhgYwoAs4lAU.png.webp"
                            alt=""></a>
                </div>
            </div>
        </div>
        <div class="swiper-container modular_thumb_swiper">
            <div class="swiper-wrapper modular_thumb_wrapper">
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUoh8KC7gcwoAs4lAU.png.webp"
                        alt="">
                </div>
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUowpOjhgYwoAs4lAU.png.webp"
                        alt="">
                </div>
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUo-NPbhQYwoAs4lAU.png.webp"
                        alt="">
                </div>
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUogNDrnAMwoAs4lAU.png.webp"
                        alt="">
                </div>
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUoh8KC7gcwoAs4lAU.png.webp"
                        alt="">
                </div>
                <div class="swiper-slide modular_thumb_slide">
                    <img src="https://17370874.s61i.faiusr.com/4/AD0I_p2kCBAEGAAgi5XV2wUowpOjhgYwoAs4lAU.png.webp"
                        alt="">
                </div>
            </div>
        </div>
    </div>
</body>

</html>